<template>
  <div class="Box">
    <a-spin tip="加载中..." class="position" v-if="roleLoading"> </a-spin>
    <typicalSearch
      ref="insideSearch"
      :searchConfig="searchConfig"
      @searchMethod="getTableData"
      style="padding-right: 0"
    ></typicalSearch>
    <a-row type="flex" justify="space-between" style="margin-bottom: 16px">
      <a-col :span="16">
        <Button
          type="search"
          label="发送信息"
          :disabled="selectedRowKeys.length === 0 || isAllSending"
          :loading="isSending"
          @click="sending(0)"
        >
        </Button>
        <span style="margin-left: 8px" v-show="selectedRowKeys.length > 0">
          {{ `当前选择 ${selectedRowKeys.length} 条数据` }}
        </span>
      </a-col>
      <a-col :span="8" style="display: flex; justify-content: flex-end">
        <a-popconfirm
          title="此操作将发送信息至全平台用户，是否继续?"
          ok-text="是"
          cancel-text="否"
          @confirm="sending(1)"
        >
          <Button type="search" label="全用户发送" :disabled="isSending || isAllSending" :loading="isAllSending">
          </Button>
        </a-popconfirm>
      </a-col>
    </a-row>
    <div class="table">
      <div class="tableList">
        <typicalTable
          ref="insideTable"
          :tableConfig="tableConfig"
          :tableData="tableData"
          @getTableData="getTableData"
          @selectionChange="tableChange"
        >
        </typicalTable>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
import typicalSearch from '@/components/typicalSearch';
import typicalTable from '@/components/typicalTable';
import Input from '@/components/typicalControl/Input';
import InputNumber from '@/components/typicalControl/InputNumber';
import treeSelect from '@/components/typicalControl/treeSelect';
import Select from '@/components/typicalControl/select';
import Button from '@/components/typicalControl/button';

import { listMessages } from '@/api/cabin';
export default {
  name: 'LssueUser',
  components: {
    typicalSearch: typicalSearch,
    typicalTable: typicalTable,
    Input: Input,
    InputNumber: InputNumber,
    treeSelect: treeSelect,
    Select: Select,
    Button: Button,
  },
  data() {
    return {
      formButtonDisableFlag: false, // 表单确定禁用按钮 防止多次点击多次保存
      editWaitForLoading: false, // 加载编辑回显数据等待Loading
      roleLoading: false, // 加载表格的loading
      modleVisible: false, // 控制弹框
      form: {
        id: '',
        title: undefined,
        content: undefined,
        remark: undefined,
      },
      // 搜索组件配置
      searchConfig: {
        formItemList: [
          {
            type: 'input',
            prop: 'searchName',
            value: '',
            label: '姓名',
          },
          // 20220210z 用户详情的手机号已屏蔽，平台用户没手机号
          // ,
          // {
          //   type: 'input',
          //   prop: 'searchMobile',
          //   value: '',
          //   label: '手机号'
          // }
        ],
        parent: this,
      },
      // 列表组件配置
      tableConfig: {
        columns: [
          {
            title: '姓名',
            dataIndex: 'name',
            ellipsis: true,
          },
          {
            title: '用户名 ',
            dataIndex: 'userName',
            ellipsis: true,
          },
        ],
        pageSize: this.$store.state.user.defaultPaginationPagesize,
        pageSizeOptions: this.$store.state.user.defaultPaginationOptions,
        parent: this,
        isSelection: true,
        scrollY: 360,
      },
      // 列表组件数据
      tableData: {
        content: [],
        totalElements: 0,
      },
      isSending: false,
      selectedRowKeys: [],
      isAllSending: false,
    };
  },
  props: {
    sendTitleId: {
      type: Number,
      default: '',
    },
  },
  created() {
    this.getMessageInfo();
  },
  mounted() {
    this.$refs.insideSearch.searchInfo();
  },
  methods: {
    /**
     * [getTableData 获取表格数据]
     * @param  {[type]} searchParam [搜索条件]
     * @return {[type]}             [description]
     */
    getTableData(searchParam) {
      if (!searchParam) throw new Error('getTableData 没有入参搜索条件！');
      this.roleLoading = true;

      let params = {
        pageNum: searchParam.pageNumber + 1,
        pageSize: searchParam.pageSize,
        name: searchParam.searchName ? searchParam.searchName : '',
      };
      listMessages('/selectMessageSendPageList', 'get', params)
        .then((res) => {
          if (res.code === 200 && res.data.records) {
            this.tableData = res.data;
          } else {
            this.tableData.records = [];
            this.tableData.total = 0;
          }
        })
        .finally(() => {
          this.roleLoading = false;
        });
    },
    // 获取消息模板信息
    getMessageInfo() {
      // // 根据ID请求相应消息的权限
      listMessages('/updateByMessageId', 'get', { id: this.sendTitleId })
        .then((res) => {
          if (res.code === 200) {
            let { id, title, content, remark } = { ...res.data };
            this.form = { id, title, content, remark };
          }
        })
        .finally(() => {
          this.editWaitForLoading = false;
        });
    },
    /**
     * [tableChange table多选变化]
     * @param  {[type]} index  [序号]
     * @param  {[type]} arrObj [数组对象]
     * @return {[type]}        [description]
     */
    tableChange(index, arrObj) {
      this.selectedRowKeys = arrObj.map((n) => {
        return n.id;
      });
    },
    formatterTime(val) {
      return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : '';
    },

    /**
     * [sending 发送信息]
     * @return {[type]} [description]
     */
    sending(type) {
      if (!this.sendTitleId && type == 0) {
        return console.log('没有文章id');
      }
      this.isSending = true;
      let usersids = this.selectedRowKeys.length > 0 ? this.selectedRowKeys.join(',') : '';
      listMessages(`/updateMessageSendList?userIds=${usersids}&userAll=${type}`, 'post', { ...this.form })
        .then((res) => {
          this.isSending = false;
          this.selectedRowKeys = [];
          this.$refs.insideTable.setSelectedRowKeys(this.selectedRowKeys);
          this.$message.success(res.message);
        })
        .finally(() => {
          this.isSending = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.Box {
  width: 100%;
  //height: calc(100% - 350px);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  .position {
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
  .table {
    flex: 1;
    background: white;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    .tableTitle {
      width: 100%;
      height: 64px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ececec;
      padding: 0 20px;
      margin-bottom: 10px;
      .title {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 550;
      }
      .addButton {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    .tableList {
      // max-height: calc(100vh - 380px);
      // overflow: auto;
      /deep/ .tableScroll {
        max-height: calc(100% - 380px);
        overflow: auto;
      }
      /deep/ .tableBlock {
        padding: 0;
        min-height: 420px;
      }
    }
  }
}
</style>
